<template>
  <div class="day_gather">
    <!-- 状态切换 -->
    <div class="tab_con_tabs">
      <div
        :id="'tab_li' + item.id"
        :class="['tab_li', { active: item.id === cycleActive }]"
        @click="cycleTabSwitch(item)"
        v-for="(item, index) in cycleSwitchY"
        :key="index">
        <span>{{ item.label }}</span>
        <span class="li_name">({{ item.num + '人' }})</span>
      </div>
    </div>
    <div class="record_con" v-if="showList.length > 0">
      <div class="late" v-for="(item, index) in showList" :key="index">
        <div class="self_info">
          <div class="iconfont icontouxiang6"></div>
          <div class="info_right">
            <div class="info_right_top">{{ item.userName }}</div>
            <div class="info_right_bottom">
              <div class="position_date">
                <span class="department">{{ item.orgName }}</span>
                <span>{{ item.postName }}</span>
              </div>
            </div>
          </div>
        </div>
        <div v-if="cycleActive !== '12'" class="self_status">{{ item.leaveTypeName || item.checkTypeName }}</div>
        <div v-if="cycleActive == '12' && item.attendanceResult" class="self_status">{{ item.attendanceResult }}</div>
      </div>
    </div>
    <van-empty v-else description="暂无数据" />
  </div>
</template>

<script>
import { getAttendanceStatusOrg } from '@api/api-attendance.js'
export default {
  name: 'StaticsOneGather',
  components: {},
  data() {
    return {
      activeCode: 'hlwzw',
      dutyInfo: {},
      cycleActive: '12',
      cycleSwitchY: [
        { label: '已打卡', id: '12', num: 0 },
        { label: '迟到', id: '1', num: 0 },
        { label: '早退', id: '2', num: 0 },
        { label: '旷工', id: '4', num: 0 },
        { label: '请假', id: '8', num: 0 },
        { label: '公务外出', id: '9', num: 0 },
        { label: '加班', id: '5', num: 0 },
        { label: '调休', id: '7', num: 0 },
      ],
      showList: [],
    }
  },
  created() {
    this.dutyInfo = JSON.parse(this.$route.query.infos)
    this.cycleActive = this.$route.query.typeTabs
    this.cycleSwitchY[0].num = this.dutyInfo.attendCount
    this.cycleSwitchY[1].num = this.dutyInfo.lateCount
    this.cycleSwitchY[2].num = this.dutyInfo.leaveEarlyCount
    this.cycleSwitchY[3].num = this.dutyInfo.neglectWorkCount
    this.cycleSwitchY[4].num = this.dutyInfo.leaveCount
    this.cycleSwitchY[5].num = this.dutyInfo.outWorkCount
    this.cycleSwitchY[6].num = this.dutyInfo.overTimeCount
    this.cycleSwitchY[7].num = this.dutyInfo.leaveOffCount
    this.dealData()
  },
  mounted() {
    this.$el.querySelector(`#tab_li${this.cycleActive}`).scrollIntoView({
      behavior: 'smooth', // 平滑过渡
      block: 'start', // 上边框与视窗顶部平齐。默认值
    })
  },
  methods: {
    handleClick(tab) {
      this.activeCode = tab.components
    },
    cycleTabSwitch(item) {
      this.cycleActive = item.id
      this.dealData()
    },
    dealData() {
      getAttendanceStatusOrg({
        pageSize: 1000,
        currentPage: 1,
        param: {
          startTime: this.$route.query.timesDay,
          endTime: this.$route.query.timesDay,
          type: this.cycleActive,
          orgId: this.$route.query.orgId || '',
        },
      }).then(res => {
        if (res.status === 200) {
          this.showList = res.data.content
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.day_gather {
  padding: 0 0 5px;
  font-size: 12px;
  // 周期切换
  .tab_con_tabs {
    display: flex;
    align-items: center;
    padding: 8px 8px;
    border-bottom: 1px solid #efefef;
    // flex-wrap: wrap;
    // overflow-x: auto;
    overflow-x: scroll;
    word-break: keep-all;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
      border-radius: 1px;
    }
    .tab_li {
      font-size: 12px;
      color: #333333;
      border-radius: 2px;
      padding: 4px 8px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      margin-right: 5px;
      &.active {
        background-color: #f4f6f8;
      }
      .li_name {
        font-size: 12px;
      }
    }
  }
  .record_con {
    padding: 3px 0;
    width: 100%;
    // background-color: #f7f7f7;
    .late {
      font-size: 12px;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #ffffff;
      box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
      padding: 0 20px;
      margin: 8px 0;
      .self_info {
        padding: 8px 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #333333;
        border-bottom: 1px solid #efefef;
        .iconfont {
          font-size: 30px;
          color: #999999;
          margin-right: 10px;
        }
        .info_right {
          .info_right_top {
            // font-size: 14px;
          }
          .info_right_bottom {
            margin-top: 3px;
            // width: 150px;
            .department {
              margin-right: 20px;
            }
          }
        }
      }
      .self_status {
        color: #969799;
      }
    }
  }
}
</style>
